<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3.x</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      父组件:<br />
      {{name}}
      <br />
      <button @click="getName">获取name</button>
      <br />
      {{age}}
      <br />
      <button @click="getAge">获取age</button>
      <hr />
      子组件
      <child />
    </div>
  </body>
  <script>
    // 子组件
    const Child = {
      template: `
      <div>
        {{name}}
        <br/>
        <button @click="getName">获取name</button><br/>
        {{age}}
        <br/>
        <button @click="getAge">获取age</button>
      </div>
      `,
      setup () {
        const person = {
          name: '李四',
          age: 30
        }

        const name = Vue.ref('')
        const getName = () => {
          name.value = person.name
        }

        const age = Vue.ref(0)
        const getAge = () => {
          age.value = person.age
        }

        return {
          name,
          age,
          getName,
          getAge
        }
      }
    }

    // 父组件
    const component = {
      components: {
        Child
      },
      setup () {
        const person = {
          name: '张三',
          age: 20
        }

        const name = Vue.ref('')
        const getName = () => {
          name.value = person.name
        }

        const age = Vue.ref(0)
        const getAge = () => {
          age.value = person.age
        }

        return {
          name,
          age,
          getName,
          getAge
        }
      }
    }

    const app = Vue.createApp(component)
    app.mount('#app')
  </script>
</html>
